import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Accordion, Button,Icon,InputItem, InputInterval, List, Popover, Select, Switch, Tools, } from 'weaver-mobile';
import { Browser, BrowserHrm, RouteLayout } from 'weaver-mobile-page';

const getLabel = Tools.getLabel;
const FormItem = List.FormItem;
const Item = Popover.Item;
const ButtonGroup = RouteLayout.ButtonGroup;
/**
 * 考核成绩-高级搜索条件
 */
@inject('planResultStore')
@withRouter
@observer
export default class Condition extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.planResultStore;
    }

    render() {
        const {tabs, queryParams, statusData, planTypeData, subBrowser, deptBrowser, subBrowserValue, deptBrowserValue, includesubData, includedeptData, setState, onSearchChange, browserHrm, browserHrmValue } = this.store;
        return (
                <div className="wm-route-layout workrelate-plan-result-condition" style={{ position: 'fixed' }}>
                    <div className="workrelate-condition">
                        <div className="roll">
                            <Accordion defaultActiveKey="0">
                                <Accordion.Panel header={getLabel(32905, '常用条件')} className="custom-header">
                                <List>
                                    <FormItem
                                        extra={<Icon type="editor" size="xxs"/>}
                                        label={getLabel(24986, "标题")}
                                        line
                                        noBorder
                                        content={<InputItem
                                            placeholder={getLabel(83869,"请输入")}
                                            value={queryParams.planName}
                                            onChange={val => onSearchChange({'planName': val})}
                                        />}
                                    />
                                </List>
                                    <List>
                                        <FormItem
                                            noBorder
                                            content={
                                                <Select
                                                    value={queryParams.dateType}
                                                    options={planTypeData}
                                                    label={getLabel('500401', '类型')}
                                                    onChange={val => onSearchChange({ 'dateType': val })}
                                                />}
                                        />
                                    </List>
                                    <List>
                                        <FormItem
                                            noBorder
                                            content={
                                                <Select
                                                    value={queryParams.status}
                                                    options={statusData}
                                                    label={getLabel(23247, '状态')}
                                                    onChange={val => onSearchChange({ 'status': val })}
                                                />}
                                        />
                                    </List>
                                    <List>
                                        <BrowserHrm
                                            store={browserHrm}
                                            isSingle={false}
                                            hasAdvanceSerach
                                            label={getLabel('30042', '人员')}
                                            type={1}
                                            onChange={(...arg) => {
                                                onSearchChange({ humId: arg[0] })
                                                setState({ browserHrmValue: arg[2] })
                                            }}
                                            valueArray={browserHrmValue}
                                        />
                                    </List>
                                    <List className='border-none'>
                                        <FormItem
                                            noBorder
                                            line
                                            content={
                                                <Select
                                                    value={queryParams.includeSubType}
                                                    options={includesubData}
                                                    label={getLabel(33553, '分部')}
                                                    onChange={val => onSearchChange({ 'includeSubType': val })}
                                                />
                                            }
                                        />
                                    </List>
                                    <List>
                                        <Browser
                                            store={subBrowser}
                                            hasAdvanceSerach
                                            label=" "
                                            type={164}
                                            tabs={tabs}
                                            onChange={(...arg) => {
                                                onSearchChange({ subId: arg[0] })
                                                setState({ subBrowserValue: arg[2] })
                                            }}
                                            valueArray={subBrowserValue}

                                        />
                                    </List>
                                    <List className='border-none'>
                                        <FormItem
                                            noBorder
                                            line
                                            content={
                                                <Select
                                                    value={queryParams.includeDepType}
                                                    options={includedeptData}
                                                    label={getLabel(27511, '部门')}
                                                    onChange={val => onSearchChange({ 'includeDepType': val })}
                                                />
                                            }
                                        />
                                    </List>
                                    <List>
                                        <Browser
                                            store={deptBrowser}
                                            hasAdvanceSerach
                                            label=" "
                                            type={4}
                                            tabs={tabs}
                                            onChange={(...arg) => {
                                                onSearchChange({ depId: arg[0] })
                                                setState({ deptBrowserValue: arg[2] })
                                            }}
                                            valueArray={deptBrowserValue}
                                        />
                                    </List>
                                </Accordion.Panel>
                            </Accordion>
                            <ButtonGroup data={this.getButton()} />
                        </div>
                    </div>
                </div>
        )
    }

    //获取操作按钮
    getButton = () => {
        const { resetCondition, getTableDatas } = this.store;
        return [{
            key: "reset",
            text: getLabel(2022, '重置'),
            onClick: () => resetCondition(),
        }, {
            key: "search",
            text: getLabel(197, '搜索'),
            onClick: () => {
                getTableDatas();
                this.props.history.go(-1)
            },
            type: "primary",
        }];
    }

    //获取操作按钮
    buildButtons = () => {
        const { resetCondition, getTableDatas } = this.store;
        return (<div className="buttons">
            <Button style={{ width: '50%' }} onClick={() => resetCondition()}>
                {getLabel(2022, '重置')}
            </Button>
            <Button
                style={{ width: '50%' }}
                type='primary'
                onClick={() => {
                    getTableDatas();
                    this.props.history.go(-1)
                }}>
                {getLabel(197, '搜索')}
            </Button>
        </div>)
    }

}

